<template>

    <div class="my-statement">
        	<div class="address">
			<div style="margin-left: 10px;">
				<p>您当前所在位置</p>
				<router-link to="/" class="link">我的报表</router-link>
			</div>
		</div>
        <div class="ms-main">
            <div class="msm-left">
                <el-tabs
                        v-model="activeName"
                        tabPosition="left"
                        @tab-click="handleClick"
                >
                    <el-tab-pane
                            label="业务流水"
                            name="first"

                    ></el-tab-pane>
                    <el-tab-pane
                            label="已完成单据"
                            name="second"

                    ></el-tab-pane>
                    <el-tab-pane
                            label="未完成单据"
                            name="third"

                    ></el-tab-pane>
					<el-tab-pane
					        label="退款单据"
					        name="four"
					
					></el-tab-pane>
                </el-tabs>
            </div>
            <div class="msm-right">
                <div>
                    <el-form
                            :inline="true"
                            :model="formInline"
                            class="demo-form-inline"
                    >

                        <el-form-item>
                          开始时间
    <el-date-picker
      v-model="starttime"
      type="date"
      placeholder="选择日期"
      value-format="yyyy-MM-dd">
    </el-date-picker>

    结束时间
    <el-date-picker
      v-model="endtime"
      align="right"
      type="date"
      placeholder="选择日期"

      value-format="yyyy-MM-dd">
    </el-date-picker>
                        </el-form-item>

                     <!--   <el-form-item>
                            <el-input
                                    clearable
                                    v-model="formInline.user"
                                    placeholder="请输入门店编号"
                            ></el-input>
                        </el-form-item> -->



<el-form-item>
  <el-select v-model="storeId" placeholder="请选择门店">
    <el-option
      v-for="item in storelist"
      :key="item.value"
      :label="item.storeName"
      :value="item.id">
    </el-option>
  </el-select>
  </el-form-item>

                        <el-form-item>
                            <el-button
                                    type="primary"
                                    @click="onSubmit"
                            style="background-color: #2D2D2D">查询
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div
                        class="msmr-txt"
                        v-if="activeName !== 'first'"
                >
                    <p>未完成金额 <span>{{wwcMoney }}</span></p>
                    <p>已完成金额 <span>{{ ywcMoney}}</span></p>
					  <p>退款金额 <span>{{ refundMoney}}</span></p>
                    <!-- <p>可下单金额 <span>3697.00</span></p>
                    <p>未完成下单金额 <span>185664.00</span></p> -->
                </div>
                <div>
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                             :header-cell-style="{ background: '#333333', color: ' #F9D532' }"
                    >
                        <!--<el-table-column
                                v-show=false
                                prop="id"
                                label="ID"
                        >
                        </el-table-column>-->
                        <el-table-column
                                type="index"
                                label="序号"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="orderSn"
                                label="订单编号"
                        >
                        </el-table-column>
						<el-table-column
						        prop="type"
						        label="业务类型"
								:formatter="stateFormat"
						>
						</el-table-column>
                        <el-table-column
                                prop="createTime"
                                label="交易时间"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="storeName"
                                label="门店"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="costMoney"
                                label="金额"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="yewuInstructions"
                                label="业务说明"
                        >
                        </el-table-column>
                    </el-table>
                </div>
                <!--分页组件-->
                <div class="msmr-pagination">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="pageData.total"
                            :page-size="10"
                            :current-page="pageData.current"
                            @next-click="currentPage+=1,handleCurrentChange()"
                            @prev-click="currentPage-=1,handleCurrentChange()"
                            @current-change="handleCurrentChange"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {getAction} from '@/api/manage'

    export default {
        data() {
            return {
				storeId:'',
                ywcMoney:'',
                wwcMoney:'',
                starttime:'',
                endtime:'',
                 token:localStorage.getItem("token"),
                currentPage: 1, // 分页，当前页
                pageData: {},// 用来存放分页用到的的数据
				storelist:[],
                url: {
                    list: "/Businesswater/getBusinesswater",
					  storelist: "/Businesswater/getstrorelist"
                },
                ddstatus: 9,
                activeName: "first",
                formInline: {
                    user: "",
                    region: "",
                    date: "", // 这里被赋值之后其实是一个数组
                },
                tableData: [
                    //此处存取接收的数据
                ],
            };
        },
        created() {
            // 肯定要加载数据的啦
            this.getDate();
			this.getstorelist();
        },
        methods: {
			  stateFormat(row, column) {
			    if (row.type === 0) {
			      return '面料业务'
			    } else  if (row.type === 1) {
			      return '个订业务'
			    } else  if (row.type === 2) {
			      return '团订业务'
			    } 
			  },
            // 加载页面数据的方法
            getDate() {
                let params = {
                     token:this.token,
                     starttime: this.starttime,
                     endtime: this.endtime,
                    ddstatus: this.ddstatus,
                    storeCode: this.formInline.user,
                    pageNo: this.currentPage,
					storeId:this.storeId
                };
                getAction(domain.publicUrl + this.url.list, params).then(res => {
                    this.tableData = res.data.data.records
                    this.pageData = res.data.data
                })
            },

     getstorelist() {
                let params = {
                     token:this.token
                };
                getAction(domain.publicUrl + this.url.storelist, params).then(res => {
                     this.storelist=res.data.data
                })
            },


            // tab切换的方法
            handleClick(tab, event) {
                console.log(tab, event);
                  this.onSubmit();
            },

            // 查询按钮
            onSubmit() {
                let stime = null
                let etime = null
                if (this.formInline.date != null && this.formInline.date != "") {
                    stime = this.formInline.date[0]
                    etime = this.formInline.date[1]
                }
                //这里是传递进去的参数
                let params = {
                    token: this.token,
                    starttime: this.starttime,
                     endtime: this.endtime,
                    ddstatus: this.ddstatus,
                    storeCode: this.formInline.user,
					storeId:this.storeId
                };

                //这里判断三个模块中，不同的模块请求不同的接口
                if (this.activeName == "first") {
                    this.url.list = "/Businesswater/getBusinesswater";
                    getAction(domain.publicUrl + this.url.list, params).then(res => {
                        this.tableData = res.data.data.records
                    })
                } else {
                    //判断是已完成还是未完成
                    if (this.activeName == "third") {
                        params.ddstatus = 0;
                      
                    } else if (this.activeName == "second") {
                        params.ddstatus = 2;
                      
                    } else if (this.activeName == "four") {
                        params.ddstatus = 3;
                       
                    }
                    this.url.list = "/Businesswater/getbill";
                    getAction(domain.publicUrl + this.url.list, params).then(res => {
                        this.tableData = res.data.data.records;
                        this.ywcMoney = res.data.ywcMoney
                         this.wwcMoney=res.data.wwcMoney
						 this.refundMoney=res.data.refundMoney
						 
						 
                    })
                }
                console.log("submit!");
            },
            // 分页的切换点击事件
            handleCurrentChange(val) {
                this.currentPage = val
                this.getDate()
            }
        },
    };
</script>
<style lang="scss" scoped>
    .my-statement {
        box-sizing: border-box;
        padding: 30px 90px;

        .ms-main {
            background: #fff;
            box-sizing: border-box;
            padding: 20px 40px 30px;
            display: flex;

            .msm-left {
                width: 105px;
            }

            .msm-right {
                flex: 1;
                margin-left: 20px;

                .msmr-txt {
                    display: flex;
                    margin: 0 0 20px;

                    p {
                        font-size: 18px;
                        margin-right: 30px;
                        font-weight: 600;
                        color: #424242;

                        span {
                            color: #ce3815;
                            margin-left: 10px;
                        }
                    }
                }

                .msmr-pagination {
                    text-align: right;
                    margin: 35px 0 0;
                }
            }
        }
    }
</style>
